<!-- 通知栏组件 -->
<template>
  <view class="notice-bar">
    <uni-icons type="sound-filled" size="18" color="#FF9800"></uni-icons>
    <swiper 
      class="notice-swiper" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
      :circular="true"
      :vertical="true"
    >
      <swiper-item v-for="(notice, index) in notices" :key="index">
        <text class="notice-text">{{ notice }}</text>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
interface Props {
  notices: string[];
}

defineProps<Props>();
</script>

<style scoped>
.notice-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #FFF9E6;
  margin-bottom: 20rpx;
  gap: 15rpx;
}

.notice-swiper {
  flex: 1;
  height: 40rpx;
}

.notice-text {
  font-size: 26rpx;
  color: #FF9800;
  line-height: 40rpx;
}
</style>